<template>
  <div class="work-order-list">
    <CommonHeader title="采购入库" :is-show-back="false" class="header-top" />
    <section class="search-box">
      <div class="inner">
        <el-select
          v-model="searchParams.warehouseCode"
          placeholder="所有仓库"
          @change="handleWarehouseCodeChange"
          clearable
          ref="searchSelect"
        >
          <el-option
            v-for="(item, index) in warehouseOptions"
            :key="index"
            :label="item.warehouseName"
            :value="item.warehouseCode"
          />
        </el-select>
        <!-- v-model="searchParams.compositeSearch" -->
        <van-search

          placeholder="搜索"
          readonly
          @search="onSearch"
          @cancel="onCancel"
          @click="showSearch"
          @click-right-icon.stop="clear"
        >
          <template #right-icon>
            <div class="right-icon">
              <img src="@/assets/images/clear.png" alt="" />
            </div>
          </template>
        </van-search>
        <div class="btn-wrap" @click="add()">新增</div>
      </div>

      <SearchForm
        ref="SearchForm"
        :search-flag="searchFlag"
        :search-form="searchParams"
        @cancel="handleCancelSearch"
        @confirm="handleConfirmSearch"
      />
    </section>
   <!-- <van-tabs
      @click="changeTab"
      v-model="searchParams.state"
      color="#548AF1"
    >
      <van-tab
        v-for="(tab, index) in tabs"
        :key="index"
        :name="tab.state"
        :title="tab.title"
      ></van-tab>
    </van-tabs> -->
    <div style="display:flex">
      <van-tabs @click="changeTab" v-model="searchParams.state" color="#548AF1" style=" width: 100%;">
        <van-tab
          v-for="(tab, index) in tabs"
          :key="index"
          :name="tab.state"
          :title="tab.title"
        ></van-tab>
      </van-tabs>
      <div  v-if="$store.getters.businessGroupShow" style="width:100px" :style="businessUnitCode?'color:rgb(84, 138, 241)':''" class="shaixuan" @click="drawer=true">
        <svg v-if="!businessUnitCode" t="1727666940917" class="icon"  viewBox="0 0 1024 1024" version="1.1"  p-id="4253" width="16" height="16"><path d="M798.777469 199.713554c15.465227-28.064172 16.243963-62.059428 2.041496-90.974991-14.153348-28.889981-40.076764-46.154179-69.305459-46.154179H230.024907c-29.181623 0-55.105039 17.264199-69.306482 46.154179-14.153348 28.91454-13.375635 62.910818 2.091638 90.974991 0.583285 1.143033 1.312902 2.212388 2.042519 3.210112l164.730808 220.589c10.310833 13.788028 16.001439 31.322379 16.001439 49.414433v299.940257c0 15.268752 10.943236 27.675316 24.415063 27.675316 13.520945 0 24.464181-12.406564 24.464181-27.675316V472.928123c0-31.126928-9.776667-61.328787-27.528983-85.087911l-163.466002-218.864729c-5.155417-10.458189-5.204535-22.811542 0-33.414018 5.447059-11.063987 15.369036-17.678638 26.555819-17.678638H731.514529c11.233855 0 21.156856 6.613628 26.602891 17.678638 5.204535 10.602476 5.155417 22.955828 0 33.414018L594.650395 387.839189c-17.752316 23.760147-27.526937 53.962006-27.526937 85.08791v458.445271c0 15.274892 10.942213 27.675316 24.463158 27.675316 13.472849 0 24.415063-12.400425 24.415063-27.675316V472.928123c0-18.092054 5.688559-35.626405 15.95232-49.414433l164.779927-220.590024a33.016974 33.016974 0 0 0 2.043543-3.210112zM675.874301 471.614198c0 15.273868 10.943236 27.675316 24.413016 27.675316h173.243693c13.471826 0 24.413016-12.401448 24.413016-27.675316 0-15.269775-10.942213-27.625174-24.413016-27.625175H700.287317c-13.469779 0-24.413016 12.354376-24.413016 27.625175z m197.658756 276.690739h-173.24574c-13.470803 0-24.413016 12.356422-24.413016 27.626198 0 15.272845 10.943236 27.624151 24.413016 27.624151h173.243693c13.471826 0 24.413016-12.352329 24.413016-27.624151 0.002047-15.270798-10.940167-27.626197-24.410969-27.626198z m0-152.133909h-173.24574c-13.470803 0-24.413016 12.356422-24.413016 27.626197 0 15.272845 10.943236 27.624151 24.413016 27.624151h173.243693c13.471826 0 24.413016-12.352329 24.413016-27.624151 0.002047-15.271822-10.940167-27.626197-24.410969-27.626197z" fill="" p-id="4254"></path></svg>
        <svg v-if="!!businessUnitCode" t="1727668793506" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="1463" width="16" height="16"><path d="M798.777469 199.713554c15.465227-28.064172 16.243963-62.059428 2.041496-90.974991-14.153348-28.889981-40.076764-46.154179-69.305459-46.154179H230.024907c-29.181623 0-55.105039 17.264199-69.306482 46.154179-14.153348 28.91454-13.375635 62.910818 2.091638 90.974991 0.583285 1.143033 1.312902 2.212388 2.042519 3.210112l164.730808 220.589c10.310833 13.788028 16.001439 31.322379 16.001439 49.414433v299.940257c0 15.268752 10.943236 27.675316 24.415063 27.675316 13.520945 0 24.464181-12.406564 24.464181-27.675316V472.928123c0-31.126928-9.776667-61.328787-27.528983-85.087911l-163.466002-218.864729c-5.155417-10.458189-5.204535-22.811542 0-33.414018 5.447059-11.063987 15.369036-17.678638 26.555819-17.678638H731.514529c11.233855 0 21.156856 6.613628 26.602891 17.678638 5.204535 10.602476 5.155417 22.955828 0 33.414018L594.650395 387.839189c-17.752316 23.760147-27.526937 53.962006-27.526937 85.08791v458.445271c0 15.274892 10.942213 27.675316 24.463158 27.675316 13.472849 0 24.415063-12.400425 24.415063-27.675316V472.928123c0-18.092054 5.688559-35.626405 15.95232-49.414433l164.779927-220.590024a33.016974 33.016974 0 0 0 2.043543-3.210112zM675.874301 471.614198c0 15.273868 10.943236 27.675316 24.413016 27.675316h173.243693c13.471826 0 24.413016-12.401448 24.413016-27.675316 0-15.269775-10.942213-27.625174-24.413016-27.625175H700.287317c-13.469779 0-24.413016 12.354376-24.413016 27.625175z m197.658756 276.690739h-173.24574c-13.470803 0-24.413016 12.356422-24.413016 27.626198 0 15.272845 10.943236 27.624151 24.413016 27.624151h173.243693c13.471826 0 24.413016-12.352329 24.413016-27.624151 0.002047-15.270798-10.940167-27.626197-24.410969-27.626198z m0-152.133909h-173.24574c-13.470803 0-24.413016 12.356422-24.413016 27.626197 0 15.272845 10.943236 27.624151 24.413016 27.624151h173.243693c13.471826 0 24.413016-12.352329 24.413016-27.624151 0.002047-15.271822-10.940167-27.626197-24.410969-27.626197z" fill="rgb(84, 138, 241)" p-id="1464"></path></svg>
        <span>筛选 </span>
      </div>
    </div>
    <CommonMain>
      <template>
        <van-pull-refresh
          v-model="refreshing"
          :disabled="isRefreshDisable"
          @refresh="onRefresh"
        >
          <van-list
            v-if="list.length > 0"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
            <listItem
              v-for="(item, index) in list"
              :key="index"
              :item-obj="item"
              @toEdit="toEdit(item)"
            >
              <template slot="buttonGorup">
                <!-- <div class="btn"  v-if="item.state === 0 || item.state === 1" @click="handleComplete(item, 4)">取消</div> -->
                <!-- <div class="btn" @click="toEdit(item)">{{  item.state === 2 ? '详情' : '编辑'}}</div> -->
                <div class="btn btn-01" v-if="item.state === 1" @click="handleComplete(item,2)">完成</div>
                <div class="btn btn-01" v-if="item.state === 0" @click="handleComplete(item, 1)">生效</div>
                <div class="btn btn-01" v-if="item.state === 2" @click="handleComplete(item, 3)">关闭</div>
              </template>
            </listItem>
          </van-list>
          <div v-if="!loading && this.list.length == 0" class="no-data">暂无数据</div>
        </van-pull-refresh>
        <Toasts v-show="toastShow" />
      </template>
    </CommonMain>
    <van-dialog v-model="show" title="确认" className="sure-dialog"  show-cancel-button confirmButtonColor="#3C76FF" @confirm="submitComplete">
      <div class="model-content">
        <div class="name" v-if="state==2">是否完成入库单：</div>
        <div class="name" v-if="state==4">是否取消入库单：</div>
        <div class="name" v-if="state==1">是否生效入库单：</div>
        <div class="name" v-if="state==3">是否关闭入库单：</div>
        <div class="value">{{ completeData.orderNumber }}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <van-button round block type="primary" @click="submitComplete">确认</van-button>
      </div>
    </van-dialog>

    <van-popup
      v-model="drawer"
      round
      closeable
      position="bottom">
      <div style="text-align:center;line-height:50px;border-bottom:1px solid #eee;margin-bottom:10px">业务单元筛选</div>
      <div   style="max-height: 50vh;overflow:auto">
        <div style="line-height:40px;text-align:center;font-size:14px"
         v-for="item in $store.getters.businessGroupData"
          :style="searchParams.businessUnitCode==item.businessUnitCode?'background:rgb(233 242 255);color: #548af1;':''"
          @click="businessUnitCodeClick(item)">
          {{item.businessUnitName}}
        </div>
      </div>
    </van-popup>
    <img src="@/assets/images/allocation/scan.png"  v-draggable  class="scan-img" @click="scanChange"/>
  </div>
</template>

<script>
import listItem from './components/listItem.vue'
import CommonHeader from '@/components/CommonHeader/index.vue'
import CommonMain from '@/components/CommonMain/index.vue'
import { productionSelect} from '@/api/allocation'
import { stateChange, getList ,getScanList ,scanCodeRuleGet,purchaseCheckInQuantity} from '@/api/inventory'
import { removeBarCodePurchaseStocks } from '@/api/purchase'
import Vue from 'vue'
import Toasts from '@/components/Toast'
import { Dialog,Toast ,Tab, Tabs,} from 'vant'

// 全局注册
Vue.use(Dialog)
Vue.use(Toast)
// import { getWorkOrderListByModel } from '@/api/productWork.js'

// -------------------------------------------------------------------
import SearchForm from './components/SearchForm.vue'
import { handleScanData } from '@/utils/common'
import { queryRepositoriesIsolationList, queryAllWareHoseList } from '@/api/allocation'

// import { getList } from '@/api/inventory'

export default {
  components: {
    CommonHeader,
    CommonMain,
    listItem,
    SearchForm,
    Toasts,
    [Dialog.Component.name]: Dialog.Component,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  data () {
    return {
      businessUnitCode:'',
      drawer:false,
      loading: false,
      list: [],
      searchParams: {
        state:'1',
        typeCode: 'purchase', //类型（生产入库：workOrderComplete 生产退料入库：applicationReturn 采购入库：purchase）
        compositeSearch: '', //综合搜索
        isInputType: true, //isInputType 为true --入库单  false-- 出库单
        pdaList: 1,
        current: 1,
        size: 10,
        warehouseCode:""
      },
      refreshing: false,
      finished: false, // 列表
      toastShow: false,
      // ---------------------------------------
      total: 0,
      //   搜索组件
      searchFlag: false,
      search: '',
      //   扫码提示弹框
      isShowConfirmDialog: false,
      // 滚动与下拉冲突
      scrollTop: 0,
      isRefreshDisable: false,
      isRequest:false,
      // 完成弹窗
      show: false,
      completeData: {},
      warehouseOptions:[],//仓库列表
      tabs: [
        {
          title: '全部',
          state: '',
          code: '1,2',
          status: [1,2]
        },
        {
          title: '生效',
          state: '1',
          code: '1'
        },
        {
          title: '完成',
          state: '2',
          code: '2'
        },
      ],
      scanParams:{
      },
      state:0,
    }
  },
  watch: {
    scrollTop (newval) {
      if (newval > 0) {
        this.isRefreshDisable = true
      } else {
        this.isRefreshDisable = false
      }
    }
  },
  created () {
    this.$store.dispatch('permission/stocksBusinessGroupConfigEnable').then((res) => {
       if(this.$store.getters.businessGroupShow){
         let data = JSON.parse(localStorage.getItem('businessUnitCodeStorApp') ||'{}')
         this.businessUnitCode =  data['com.yelink.purchaseWarehousing.com']
       }
      this.getAllWarehouse()
    });
  },
  mounted () {
    // this.getList()
    const that = this
    // PDA扫码
    // window['QrcodeMsg'] = res => {
    //   if (res) {
    //     console.log(res, 'ScanCodeMsg这是首页')
    //     that.searchParams.compositeSearch = res
    //     that.getList()
    //   }
    // }
    // 扫码枪扫码
    window['ScanCodeMsg'] = res => {
      if (res) {
        console.log(res,'ScanCodeMsg这是首页')
        that.$nextTick(()=>{
          that.$refs.searchSelect.blur()
        })
        that.scanHomeBarcodeTrackWithoutNumber(res)
      }
    }
  },

  methods: {

    businessUnitCodeClick(item){
      this.businessUnitCode = item.businessUnitCode;
      let data = JSON.parse(localStorage.getItem('businessUnitCodeStorApp') ||'{}')
      data['com.yelink.purchaseWarehousing.com'] = item.businessUnitCode
      localStorage.setItem('businessUnitCodeStorApp' , JSON.stringify(data))
      this.drawer=false;
        this.onRefresh()

    },
    clear() {
      this.scanParams.scanCode = ""
      this.$refs.SearchForm.cancel();
    },
    changeTab(name,title){
      if(name === ''){
        this.searchParams.status = '1,2'
      }else{
        delete this.searchParams.status
      }
      this.onRefresh('tabChange')
    },
    handleWarehouseCodeChange(){
      localStorage.setItem('home-purchase-warehouseCode',this.searchParams.warehouseCode)
      this.onRefresh('init');
    },
    // 获取所有的仓库列表
    async getAllWarehouse () {
      const result = await queryAllWareHoseList()
      const { code, data = {}, message } = result.data || {}
      if (+code === 200) {
        const { records = [] } = data
        this.warehouseOptions = records
        if(!localStorage.getItem('home-purchase-warehouseCode')){
          this.searchParams.warehouseCode = "";
          localStorage.setItem('home-purchase-warehouseCode',this.searchParams.warehouseCode)
        }else{
          this.searchParams.warehouseCode = localStorage.getItem('home-purchase-warehouseCode');
        }
        this.onRefresh('init')
      } else {
        Toast(message)
      }
    },
    async scanHomeBarcodeTrackWithoutNumber(res) {
      const that = this;
      res = await this.scanCodeRuleGet(res);
      if (this.loading) {
        return;
      }
      this.scanParams.scanCode = res
      this.onRefresh('scan')
    },
    // 播放音频
    playAudio(isSuccess) {
      // const audioElement = document.getElementById('audio')
      const audioElement = this.$refs.audio;
      // audioElement
      audioElement.src = isSuccess
        ? require("@/assets/audio/正确.mp3")
        : require("@/assets/audio/错误.mp3");
      this.$nextTick(() => {
        try {
          audioElement.paused && audioElement.play();
        } catch (error) {
          console.log(error);
        }
      });
    },
    // 解码 refund-outbound-app.material-out.handleScanCode.barCode
    async scanCodeRuleGet(scanCode) {
      try {
        const params = {
          code: "refund-outbound-app.material-out.handleScanCode.barCode",
        };
        const {
          data: { code, data },
        } = await scanCodeRuleGet(params);

        if (code === "200") {
          // 如果有配置解码规则
          if (data.value) {
            const fn = new Function(`return ${data.value}`)();
            const result = fn(scanCode);
            //   this.playAudio(true);
            return result;
          } else {
            //  this.playAudio(true);
            return scanCode;
          }
        }
      } catch (error) {
        this.playAudio(false);
        return "";
      }
    },
    // 手动拉起相机
    scanChange(){
      const that = this
      if(process.env.NODE_ENV === 'development'){
        // this.handleScanData("PO20230611002")
        that.$nextTick(()=>{
          that.$refs.searchSelect.blur()
        })
        that.scanHomeBarcodeTrackWithoutNumber('20240226-CGSH0550')
      }else{
        window.flutter_inappwebview.callHandler("qrCode").then((res) => {
          if (res) {
            that.$nextTick(()=>{
              that.$refs.searchSelect.blur()
            })
            that.scanHomeBarcodeTrackWithoutNumber(res)
          }
        });
      }

    },
    // 下拉刷新
    onRefresh (type = 'onRefresh') {
      // 清空列表数据
      this.finished = false
      this.list = []
      this.searchParams.current = 1
       if(type == 'scan'){
        this.getSearch()
      }else{
        this.getList(type)
      }
    },
    scanOperate(){
      if(this.list.length == 0){//查询结果为空提示
          Toast({
            className:"myToast jinggao",
            message: '暂无数据',
            position: 'top',
          });

        }else if(this.list.length == 1){//查询结果为一条则跳转
          this.$router.push({
            path:'/allocationDetail',
            query:{
              id:this.list[0].id,
              orderNo:this.list[0].orderNumber
            }
          })
        }
    },
    async getSearch(){
      this.loading = true
      this.refreshing = true
      const params = {
        warehouseCode:this.searchParams.warehouseCode,
        scanCode : this.scanParams.scanCode,
        inOrOutTypes:"purchase"
      }
      const result = await getScanList(params)
      this.refreshing = false
      this.loading = false
      const { code, data = {},message} = result.data || {}
      if (code == '200') {
        if(data.list && data.list.length > 0) {
          data.list.forEach(item => {
            item.isToggle = false
          })
        }
        this.searchParams.state = ''//切换至全部显示
        this.list = data.list||[]
        this.scanOperate()
        this.finished = true
      }else{
        Toast.fail(message)
      }
    },
    async getList (type) {
      this.loading = true
      this.refreshing = true
      if(this.$store.getters.businessGroupShow){//如果开启了主体
        this.searchParams.businessUnitCode = this.businessUnitCode
      }
      const result = await getList(this.searchParams)
      this.refreshing = false
      this.loading = false
      const { code, data = {}} = result.data || {}
      if (code == '200') {
        if(data.records && data.records.length > 0) {
          data.records.forEach(item => {
            item.isToggle = false
          })
        }
        if (this.searchParams.current > 1) {
          this.list = this.list.concat(data.records)
        } else {
          this.list = data.records
        }

        this.total = data.total
        this.tabs[0].title = `全部(${data.dto[1] + data.dto[2]})`
        for (const key in data.dto) {
          const index = this.tabs.findIndex(tab => tab.code === key)
          console.log('index',index)
          if (index > -1) {
            switch (key) {
              case '1':
                this.tabs[index].title = `生效(${data.dto[key]})`
                break
              case '2':
                this.tabs[index].title = `完成(${data.dto[key]})`
                break

              default:
                break
            }
          }
        }
        if (type !== 'tabChange' ) {

          if(type != 'init'){
            if(this.list.length == 1){//查询结果为一条则跳转
              this.$router.push({
                path:'/allocationDetail',
                query:{
                  id:this.list[0].id,
                  orderNo:this.list[0].orderNumber
                }
              })
            }
          }

        }
        if (this.total <= this.list.length || data.records.length==0 || data.records.length<this.searchParams.size) {
          this.finished = true
        }
      } else {
        Toast.fail('系统繁忙')
      }
    },
    // 确认搜索
    handleConfirmSearch (val) {
      // this.searchParams = val
      let detaultParams = {current:this.searchParams.current,size:this.searchParams.size,typeCode: 'purchase',isInputType: true, pdaList: 1}
      this.searchParams = {...detaultParams,...val}
      this.searchParams.state=''
      delete this.searchParams.state
      this.searchParams.status = '1,2'
      this.searchFlag = false
      this.onRefresh('searchByQueryParams')
    },
    // 重置搜索
    handleCancelSearch (val) {
      let detaultParams = {current:this.searchParams.current,size:this.searchParams.size,typeCode: 'purchase',isInputType: true, pdaList: 1}
      console.log(this.searchParams, '====')
      this.searchParams = {...detaultParams,...val}
      this.searchParams.state= '1'
      this.searchParams.warehouseCode = ""
      delete this.searchParams.status
      this.searchFlag = false
      localStorage.removeItem('home-purchase-warehouseCode')
      this.onRefresh('searchByQueryParams')
    },
    // 弹出搜索框
    showSearch () {
      this.searchFlag = !this.searchFlag
    },
    // 搜索
    onSearch() {
      console.log(this.search)
    },
    // 取消搜索
    onCancel() {
      this.searchFlag = false
    },
    // 加载更多
    onLoad () {
      if(this.finished){
        return
      }
      console.log('滚到了底部')
      this.searchParams.current += 1
      this.getList()
    },
    async handleScanData (val) {
      if(this.isRequest){
        return
      }
      this.isRequest = true
      setTimeout(()=>{
        this.isRequest = false
      },100)
      const res = await productionSelect(val);
      let { data } = res;
      // console.log(JSON.stringify(data.data));
      if (data.code == 200) {
        data.data = {...data.data,...data.data.materialFields.skuEntity}
        data.data.materialFields.skuId = data.data.skuId
        data.data.materialFields.skuEntity = {...data.data.materialFields.skuEntity}
        data.data.materialFields.skuEntity.skuId = data.data.materialFields.skuEntity.skuId ? data.data.materialFields.skuEntity.skuId :data.data.skuId
        let params = encodeURIComponent(JSON.stringify(data.data))
        this.$router.push('/allocationDetail?type=scan&data='+params)
      } else {
        Dialog.alert({
          title:"扫码提示",
          message:res.data.message,
          confirmButtonColor: "#548AF1",
          showCancelButton:false
        })
      }
    },
    // 状态改变
    async changeState(item, state) {
      if(state == 2){
        const params = {
          inOrOutType:item.item,
          id:item.id,
          orderNumber:item.orderNumber,
          relateOrders:item.relateOrders,
          relateType:item.relateType,
          state:2
        }
        this.purchaseCheckInQuantity(params,item,state)
        return
      }
      await this.stateChange(item,state)
    },
    async stateChange(item,state){
      const res = await stateChange({ id: item.id, inOrOutType: item.inOrOutType, state})
      let { data } = res;
      if (data.code == 200) {
        Toast.success('状态更改成功')
        if(state == 3 || state == 4){
          // 将批次删除
          const deleteBar = await removeBarCodePurchaseStocks({relateNumber: item.orderNumber})
        }
        this.onRefresh('searchByQueryParams')
      } else {
        Toast(data.message)
      }
    },
    //入库校验
    async purchaseCheckInQuantity(params,item,state) {
      const result = await purchaseCheckInQuantity(params)
      const { code, message, data } = result.data
      if (code == 200) {
        if (data.type == 1) {
          Dialog.confirm({
            title: "提示",
            message: data.remind+',确认是否提交',
            confirmButtonColor: "#548AF1",
          }).then(async () => {
            await this.stateChange(item,state)
          }).catch(() => {
            // on cancel
          });

        } else if (data.type == 2) {
          Toast.fail(data.remind)
        } else {
          await this.stateChange(item,state)
        }
      } else {
        Toast.fail(message)
        throw new Error()
      }
    },
    // 完成确认
    submitComplete() {
      this.show = false
      console.log(this.completeData, '==89')
      this.changeState(this.completeData,  this.state)
    },
    // 打开完成确认弹窗
    handleComplete(item,state) {
      this.show = true
      this.state = state
      this.completeData = item
    },
    add() {
      // this.$router.push('/allocation/add')
      this.$router.push('/allocation/addIndex')
    },
    toEdit(item){
      // this.$router.push('/allocationDetail?info' + JSON.stringify(item))
      this.$router.push({
        path:"/allocationDetail",
        query:{
          id:item.id,
          orderNo:item.orderNumber
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/common.scss';
.right-icon {
  display: flex;
  align-items: center;
}
.scan-img{
  position: fixed;
  bottom: 1vh;
  right: 0;
  // transform: translateX(-50%);
  width: 82px;
  height: 82px;
  z-index: 2;
}
.work-order-list {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .search-box {
    // height: 46px;
    position: relative;
    .inner{
      font-size: 16px;
      color: #fff;
      padding: 8px 12px;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      ::v-deep {
        .el-input--suffix {
          .el-input__inner {
            height: 33px;
            width: 89px;
            border: 1px solid #548af1;
            color: #548af1;
            font-size: 12px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            color: #548af1;
            &::placeholder {
              color: #548af1;
            }
          }
          .el-input__icon {
            line-height: 33px;
            color: #548af1;
          }
        }
      }
    }
    .van-search {
      flex: 1;
      padding: 0px 15px 0 3px;
      // height: 32px;
      border-radius: 4px;
      border: 1px #DEDEDE solid;
      margin-left: 5px;
    }
    .van-search__content {
        background-color: #ffffff;
        height: 32px;
      .van-cell {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
    .btn-wrap{
      width: 62px;
      height: 32px;
      background: #548AF1;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 7px;
      font-size: 14px;
      color: #fff;
    }
    .scan-box {
      display: flex;
      align-items: center;
      img {
        width: 20px;
      }
    }
  }
  .van-pull-refresh {
    height: 100%;
    overflow: scroll;
    /deep/ .van-pull-refresh__track {
      // overflow: scroll;
    }
    .van-list {
      height: 100%;
      // overflow: scroll;
    }
    .no-data {
      height: 100%;
      font-size: 14px;
      display: flex;
      justify-content: center;
      color: #c7c6c6;
      padding-top: 30px;
    }
  }
}
.sure-dialog{
  border-radius: 4px;
}
.model-content{
  padding: 25px 10px 20px 26px;
  .name{
    font-size: 14px;
    color: #666666;
  }
  .value{
    font-size: 16px;
    color: #548AF1;
    margin-top: 10px;
  }
}
.shaixuan{
      width: 80px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 4px;
      color: #646566;
      font-size: 14px;
      line-height: 20px;
      cursor: pointer;
      background: #fff;
}
</style>
<style lang="scss" scoped>
.van-overlay {
  // z-index: 2000 !important;
}
</style>
